<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="03上轮播图.css">
    <link rel="stylesheet" href="03上导航.css">
    <script src="jQuery.min.js"></script>
    <link rel="stylesheet" href="03宫崎骏动画轮播.css">
    <link rel="stylesheet" href="03其他布局样式.css">
    <style>
   
    </style>
</head>

<body>
    <div class="box">
        <div class="banner">
        </div> 
        <ul class="ul0">
          <a href="01login.html"><li class="bannerli">登录页面</li></a>
          <a href="04.个人主页.html"><li class="bannerli">个人简介</li></a>
          <a href="05恋爱那些事.html"><li class="bannerli">灵魂伴侣</li></a>
          <a href="06你的人格类型.html"><li class="bannerli">人格类型</li></a>
          <a href="07亲情.html"><li class="bannerli">亲人羁绊</li></a>
          <a href=""><li class="bannerli">友谊线络</li></a>
          <a href=""><li class="bannerli">成长历程</li></a>
        </ul>
        <div class="wrap">
            <ul class="list">
                <li class="item active"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <button class="btn" id="goPre"></button>
                <button class="btn" id="goNext"></button>
            </ul>
            <ul class="pointList">
                <li class="point active" data-index='0'></li>
                <li class="point" data-index='1'></li>
                <li class="point" data-index='2'></li>
                <li class="point" data-index='3'></li>
                <li class="point" data-index='4'></li>
            </ul>
        </div>
        <script src="03上轮播图.js"></script>

        <div class="head">
            <p class="word" style="font-size: 25px;">
                本页导航
            </p>
            <span style="color: pink;">........................................</span>
            <br>
            <ul>
                <li>
                    <p class="word"><a href="">导航可到各页面</a> </p>
                </li>
                <li>
                    <p class="word"><a href="">轮播图点击可看视频</a> </p>
                </li>
                <li>
                    <p class="word"><a href="">各页面正门入口</a> </p>
                </li>
                <li>
                    <p class="word"><a href="">宫崎骏治愈动漫点播</a> </p>
                </li>
                <li>
                    <p class="word"><a href="">源码地址及更多</a> </p>
                </li>

            </ul>

        </div>



        <div class="box0">
            <div class="box1">
                <div class="box11">

                    <img src="Photo/37看书女生.jpg" alt="" id="rabbit">
                    <br>

                    <div class="word2">
                        <font style="color:pink;"> ID:5720191601</font>

                        <br><br>
                        <font style="color:violet;">个签：心理委员</font>
                        <br><br>
                        <strong>99w&nbsp;&nbsp;99w&nbsp; 99w </strong>
                        <br>
                        雨衣 星子 心心
                        <br> <br>
                        <a href="04.个人主页.html">>进入个人主页< </a>



                    </div>




                </div>
                <div class="box12" id="box12">
                    <a href="05恋爱那些事.html">
                        <img src="Photo/38花子君恋爱图.jpg" alt="">
                        <p class="p1" id="pp1">彼此的摆渡人... </p>
                        <div class="word">
                            <p class="p2" id="p1">恋爱就是这般神奇而带有神秘的色彩，可以让人心猿意马，也可以让人痛苦难纾，而恋爱更多的时候是甜蜜愉悦的，所以很多人才向往爱情。</p>
                        </div>
                    </a>
                </div>
                <div class="box13" id="box13">
                    <a href="06你的人格类型.html">
                        <img src="Photo/39九型人格图片.jpg" alt="">
                        <p class="p1" id="pp2"> 你的人格类型... </p>
                        <div class="word">
                            <p class="p2" id="p2">九型人格是一种认识人、了解人的管理工具。它具有两方面的作用：一是自我了解，知道我们哪些地方可以改善；二是了解别人，如何更有效地与他人沟通。</p>
                        </div>
                    </a>
                </div>
            </div>
            <br><br>
            <div class="box2">
                <div class="box21">
                    <a href="07亲情.html">
                        <img src="Photo/310朝花夕拾原生家庭.jpg" alt="">
                        <p class="p1">爱的教育... </p>
                        <div class="word">
                            <p class="p2">经纱是那流逝的光阴，四季逡巡，尽染层云。纬纱是这人世的浮沉，举步踏堙，荡漾心灵。妖尔夫的子民，只是一心织下昔日，百年不移，究其一生。</p>
                        </div>
                    </a>
                </div>
                <div class="box22">
                    <a href="">
                        <img src="Photo/311风平浪静的明日.png" alt="">
                        <p class="p1">七月与安生... </p>
                        <div class="word">
                            <p class="p2">恋爱就是这般神奇而带有神秘的色彩，可以让人心猿意马，也可以让人痛苦难纾，而恋爱更多的时候是甜蜜愉悦的，所以很多人才向往爱情。</p>
                        </div>
                    </a>
                </div>
                <div class="box23">
                    <a href="">
                        <img src="Photo/312阅读.jpg" alt="">
                        <p class="p1">一个人的朝圣... </p>
                        <div class="word">
                            <p class="p2">恋爱就是这般神奇而带有神秘的色彩，可以让人心猿意马，也可以让人痛苦难纾，而恋爱更多的时候是甜蜜愉悦的，所以很多人才向往爱情。</p>
                        </div>
                    </a>
                </div>
            </div>

        </div>

        <script>

            $(".p1").mouseenter(function () {
                $(this).next("div").children('p').fadeIn(1000)
            })
            $(".p1").mouseleave(function () {
                $(this).next("div").children('p').fadeOut(1000)
            })

        </script>


        <div class="box3">
            <ul>
                <li class="lilb current"><a href=""><img src="Photo/313千寻大.jpg" alt="" class="big">
                        <img src="Photo/314千寻小.jpg" alt="" class="small"></a></li>

                <li class="lilb"><a href=""><img src="Photo/317猫大.jpg" alt="" class="big">
                        <img src="Photo/318猫小.jpg" alt="" class="small"></a></li>

                <li class="lilb"><a href=""><img src="Photo/315魔女大.jpg" alt="" class="big">
                        <img src="Photo/316魔女小.jpg" alt="" class="small"></a></li>

                <li class="lilb"><a href=""><img src="Photo/319鱼大.jpg" alt="" class="big">
                        <img src="Photo/320鱼小.jpg" alt="" class="small"></a></li>

            </ul>

            <audio id="music1" controls="controls" autoplay="autoplay" preload id="music1" hidden>
                <!-- <source src="/Audio/01紫罗兰ED.mp3"/> -->
            </audio>
            <!-- 播放音乐 -->
        </div>
        <script>
            $(function () {
                $(".lilb").mouseenter(function () {
                    $(this).stop().animate({
                        width: 384
                    }, 500).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                    $(this).siblings(".lilb").stop().animate({
                        width: 192
                    }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
                })
            })
        </script>

        <div class="box4" >
            <pre style="font-size: 20px;letter-spacing: 3px;line-height: 25px;">

        这是一个大型匿名树洞,还有很多功能有待开发
        一行代码一行诗，有无一起写诗者，在线募（qq:2330295306）
        如果觉得这份初级简易版还看得过去的，给个star鼓励一下可还行（hhh）
        [诚邀]github地址:
            </pre>
            
        <div class="box41" id="show" style="font-size: 25px;margin-left: 105px;"></div> 
        <pre style="font-size: 20px;letter-spacing: 3px;line-height: 35px;">
        看着点时间，再爱也要早点休息哦
        </pre>
        </div>
        <script>

            function setTime() {
                var data = new Date();
                var hh = data.getHours();
                mm = data.getMinutes();
                ss = data.getSeconds();
                data = data.getDate();
                if(ss < 10){
                    ss = "0"+ss
                }
                $("#show").text( "[ "+hh + " : " + mm + " : " + ss+" ]");
            }
            //设置时间间隔
            setInterval(setTime, 1000);
        
        
        </script>
        <div class="box5">
            
        </div>
    </div>
</body>

</html>